<template>
    <div class="evaluate">
         <div class="classTags">
            <span :class="selId==item.id? 'active':'' " v-for="(item,idx) in classTags" :key="idx" @click="selTags(item.id)">{{item.name}}</span>
        </div>
        <ul v-if="Comment.length>0">
            <li class="jionList" v-for="(item,index) in Comment" :key="index">
                <div class="weui-cell  ">
                    <div class="weui-cell__hd">
                        <avatar 
                          :avatar="item.user.avatar" 
                          :Level="item.user.partner_level" 
                          :userId="item.user.id" 
                          :isAuth="item.user.is_auth" 
                          :isPartner="item.user.is_partner" 
                          v-if="item.user"></avatar>
                    </div>
                    <div class="weui-cell__bd">
                        <div class="nickname">{{item.user.nickname}}</div>
                        <div class="time">{{item.created_at}}</div>   
                    </div>
                </div>
                <div class="content">
                    <span v-for="(tagItem,idx) in item.tags" :key="idx">#{{tagItem}}</span>{{item.description}}
                </div>
            </li>
        </ul>

        <div v-else>
             <img :src="img+'/que/no_conten@2x.png'" alt="" class="queS" >
        </div>
    </div>
</template>

<script>
import {tags} from "@/api/evaluate"
import avatar from "@/components/avatar"
export default {
    props: ["currentTags","type","id","Comment"],
    components: {
        avatar,
    },
    data() {
        return {
            classTags:[],
            selId:0,
            img: this.$URL.imgurl,
        }
    },
    methods:{
       selTags(id){
          // let classTags=this.classTags
          // classTags[idx].selected=!selected;
          // let idArray=classTags.filter(function (v) {
          //   if (v.selected) {
          //     return true;
          //   } else {
          //     return false;
          //   }
          // }).map(function (v) {
          //   return v.id;
          // });
          this.selId=id;
          this.$emit("selCom",{id})
       },
       gettags(){
         tags().then(res=>{
             let tags=res.data;
             tags.unshift({name:"全部",id:0})
             let classTags=[]
            //  tags.map((item,index)=>{
            //     if(index==0){
            //         classTags.push(
            //             Object.assign({},item,{selected:true})
            //         )
            //     }else{
            //         classTags.push(
            //             Object.assign({},item,{selected:false})
            //         )
            //     }
            //   }); 
             this.classTags=tags
         })
         console.log(this.classTags)
       },
    },
    onLoad(options){
        this.gettags()
    }
}
</script>

<style lang="scss">
.jionList{
      padding:10px 0 ;
      border-bottom:1px solid #ddd;
      .avatar{
        width:45px;
        height:45px;
        border-radius:50%;
        margin-right:10px;
        display:block;
      }
      .nickname{
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:18px;
      }
      .time{
        font-size:12px;
        font-weight:500;
        color:rgba(102,102,102,1);
        line-height:18px;
      }
      .content{
        padding: 0 15px;
        font-size:12px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:18px;
        span{
          color:#1A84FB;
          padding-right: 10px;
        }
      }
    }
    .classTags{
      padding:0 15px;
      span{
        line-height:30px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(26,132,251,1);
        border-radius:15px;
        padding:0 15px;
        display: inline-block;
        margin-right: 10px;
        margin-top: 15px;
        font-size:14px;
        font-weight:500;
        color:rgba(26,132,251,1);
      }
      .active{
          background:rgba(214,231,254,1);
      }
    }
    .queS{
      width: 417rpx;
      height: 324rpx;
      display: block;
      margin: 50px auto;
    }
</style>
